<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script type="text/javascript" src="/Public/static/jquery-2.0.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #EEEEEE;
        }

        .clean{
            clear: both;
            width: 0;
            height: 0;
            overflow: hidden;
        }


        .header div{
            margin-right: 12px;
        }

        .header{
            height: 44px;
            color: #FFFFFF;
            background-color: #E14946;
        }

        .line{
            background-color: #ffffff;
            width: 1px;
            height: 90%;
            float: left;
        }

        .cl{
            font-size: 36px;
            padding-left: 12px;
            float: left;
        }


        .wd{
            font-size: 28px;
            text-align:center
        }


        .banner{
            width: 100%;
            height: auto;
        }

        .banner >img{
            width: 100%;
            height: 100%;
        }

        .partner{
            width: 90%;
            height:60px ;
            float: right;
            margin: 13px;
            position: relative;
            background-color: #FFFFFF;
            border-radius:15px;
        }

        .partner_left{
            width: 60px;
            height: 100%;
            float: left;
            position: absolute;
            left: -57px;
        }

        .partner_left>img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            margin: 0px 35px;
        }

        .partner_right{
            width: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
            margin-left: 10px;

        }

        .inp{
            width: 90%;
            margin-left: 5%;
        }


        .inp div{

            background: #FFFFFF;
        }


        .phone{
            width: 100%;
            height: 50px;
            margin-top: 15px;
            border-radius: 15px;
            overflow: hidden;

        }

        .phone>input{
            width: 95%;
            height: 100%;
            border: none;

            margin-left: 1%;
        }

        .verify{
            width: 100%;
            height: 50px;
            margin-top: 15px;
            border-radius:10px;
        }

        .code{
            width: 40%;
            height: 100%;
            border: none;
            float: left;
            margin-left: 10px;
        }

        .btn{
            width: 35%;
            height: 40px;
            background: #E14946;
            float: right;
            display: inline-block;
            border-radius:10px;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            margin-right: 15px;
            margin-top: 5px;

        }



        .button{

            width: 80%;
            height: 45px;
            background: #E14946;
            margin-left: 10%;
            border-radius: 15px;
            margin-top: 25px;
            font-size: 25px;
            color: #ffffff;
            text-align: center;
            line-height: 45px;
        }
        input[type="number"] {
             -moz-appearance: textfield;
         }


        /*阴影*/
        .shadow{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #000;
            opacity: 0.5;
            display: none;
        }
        .navigation{
            position: fixed;
            top: 185px;
            left: 20px;
            display: none;
        }
        .navigation-span1{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: #F94705;
            border-radius: 50px;
            text-align: center;
            line-height: 25px;
            color: #fff;
            z-index: 99;
            margin-right: 5px;
        }
        .navigation-span2{
            font-size: 20px;
            color: #fff;
        }
        .navigation-span2 img{
            width: 40px;
            height: 27px;
            vertical-align: middle;
            margin:0 5px;
        }
        .navigation-p2{
            margin-top: 20px;
        }
        .p2-span2 img{
            width: 160px;
            height: 32px;
            margin-left: 10px;
        }
        .share{
            position: absolute;
            top: -150px;
            right: -136px;
        }

    </style>
</head>
<body>
<div class="header">
<!--    <div class="cl" id="close">×</div>
    <div class="line"></div>-->
    <div class="wd">邀请好友</div>
</div>
<div class="banner">
    <img src="/Public/Api/images/head.jpg" alt="">
</div>
<div class="mian">
    <form action="" method="post" class="form-horizontal" id="from" autocomplete="off">
        <input type="hidden" name="inv_phone" value="{$phone}">
        <input type="hidden" name="type" value="forgotten">
        <input type="hidden" name="driver" id="driver" value="">
    <div class="partner">
        <div class="partner_left">
            <img src="{$avatar}" alt="" onError="this.src='/Public/Api/images/default.jpg';">
        </div>
        <div class="partner_right">
            "{$mobile}" 邀请您加入可可直播
        </div>
    </div>
    <div class="clean"></div>

    <div class="inp">

        <div class="phone">
            <input type="tel" name="user"  id='user' placeholder="请输入手机号码">
            <span class="clean"></span>
        </div>

        <div class="verify">
            <input type="tel" id="code" name="code" class="code" placeholder="请输入验证码">
        </div>
    </div>
    <div class="clean"></div>

    <div class="clean"></div>
</div>


<div class="button" id="upload">下载APP</div>

<!-- 阴影 -->
<div class="shadow" id="shadow"></div>
<div class="navigation" id="navigation">
    <p class="navigation-p1">
        <span class="navigation-span1">1</span>
        <span class="navigation-span2">点击右上角的<img src="/Public/Api/images/dian.png" alt="">按钮</span>
    </p>
    <p class="navigation-p2">
        <span class="navigation-span1">2</span>
        <span class="navigation-span2 p2-span2">选择<img src="/Public/Api/images/browser.png" alt=""></span>
    </p>
    <img src="share.png" alt="" class="share">
</div>
</body>
</form>

<script type="text/javascript">
    var shadow = document.getElementById('shadow');
    var navigation = document.getElementById('navigation');
    if(isWeiXin()){
        shadow.style.display='block';
        navigation.style.display='block';
    }



        function isWeiXin(){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }
    var pla=ismobile(1);
    if(pla == 1){
        document.getElementById("driver").value = 1;
    }else{
        document.getElementById("driver").value = 2;
    }

    $('#close').click(function(){
        window.close();
    });

    var is_send = false,interval = null,sleep;

    //发送验证码
    $('#verify').click(function(){

        var from         = document.getElementById('from');
        var Data         = new  FormData(from);

        var mobile= document.getElementById("user").value;

        if(mobile == ''){
            alert("请输入手机号");
            return false;
        }
        if(!(/^1[3456789]\d{9}$/.test(mobile))){
            alert("手机号码有误，请重填");
            return false;
        }

        if(is_send){
            return false;
        }
        is_send = true;
        sleep = 60;
        if (interval != null) {
            clearInterval(interval);
        }
        interval = setInterval(function () {
            if (sleep <= 0) {
                is_send = false;
                clearInterval(interval);
                interval = null;
                document.getElementById("verify").innerHTML = "重新发送";
            } else {
                document.getElementById("verify").innerHTML = "重新发送(" + sleep-- + ")";
            }
        }, 1000);

        $.ajax({
            url: "{:U('api/public/verify')}",
            type: "POST",
            data: Data,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            success: function(msg){

                var jsonobj = eval(msg);
                if(msg.code==-3){
                    alert(jsonobj.message);
                    return false;
                }else {

                    /*   if (msg['code'] ==1 ){
                       window.location.href = '{:U("admin/Product/goods")}';
                   }*/
                }
            },
            error:function(){
                alert('网络错误，稍后再试');
            }
        });


        return false;
    });

    //下载app
    $('#upload').click(function(){

        var from         = document.getElementById('from');

        var Data         = new  FormData(from);

        var mobile= document.getElementById("code").value;


        if(mobile == ''){
            alert("请输入验证码");
            return false;
        }

        $.ajax({
            url: "{:U('api/Invitingfriends/referrer')}",
            type: "POST",
            data: Data,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            success: function(msg){
                var jsonobj = eval(msg);
                if(msg.code==-4){
                    alert(jsonobj.message);
                    return false;
                }else {
                    //alert(jsonobj.data.upload_url);
                    if(msg.code== 200){
					//alert(jsonobj.data.upload_url);
                       window.location.href = jsonobj.data.upload_url;
                    }
                }
            },
            error:function(){
                alert('网络错误，稍后再试');
            }
        });
            return false;
    });


    /**
     * [isMobile 判断平台]
     * @param test:	0:iPhone	1:Android
     */
    function ismobile(test){
        var u = navigator.userAgent, app = navigator.appVersion;
        if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
            if(window.location.href.indexOf("?mobile")<0){
                try{
                    if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                        return '0';
                    }else{
                        return '1';
                    }
                }catch(e){}
            }
        }else if( u.indexOf('iPad') > -1){
            return '0';
        }else{
            return '1';
        }
    }

</script>

<script>
    var timer, windowInnerHeight;
    function eventCheck(e) {
        if (e) { //blur,focus事件触发的
            $('#dv').html('android键盘' + (e.type == 'focus' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
            if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
                setTimeout(function () {//由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
                    windowInnerHeight = window.innerHeight;//获取弹出android软键盘后的窗口高度
                    timer = setInterval(function () { eventCheck() }, 100);
                }, 500);
            }
            else clearInterval(timer);
        }
        else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
            if (window.innerHeight > windowInnerHeight) {
                clearInterval(timer);
                $('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
            }
        }
    }
    $('#user').click(eventCheck).blur(eventCheck);
</script>

</body>
</html>